<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../util/icon/iconfont.css">
    <link rel="stylesheet" href="../../util/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="../../util/jquery-3.4.0.js"></script>
    <script src="../../util/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../../css/ClassManagement.css">
    <script src="../../js/class/class.js" defer></script>
</head>
<body>
    <div class="container-fluid" style="background: #F2F2F2">
        <div class="row row-f2">
            <!--面包屑导航-->
            <div>
                <ol class="breadcrumb navbar-fixed-top nav-road">
                    <li><a href="#">首页</a></li>
                    <li class="active">班级管理</li>
                </ol>
                </div>
          <div class="container border-f2">
              <!--标题-->
              <div class="class-head">
                  <h2>班级管理</h2>
              </div>
              <!--搜索框和点击按钮-->
              <div class="class-search">
                  <input type="text" class="form-control search" placeholder="班级、老师姓名">
                  <button type="button" class="btn btn-default query" >查询</button>
                  <button type="button" class="btn btn-info  add" data-toggle="modal" data-target="#myModal">新增<span class="iconfont icon-jia "></span></button>
                  <!--a href="javascript:;" data-toggle="modal" data-target="#myModal"><span class="iconfont icon-jia add"></span></a>-->
              </div>
              <!--表格-->
              <div class="class-form center-block ">
                  <table class="table table-striped  table-hover text-center">
                      <thead>
                      <tr class="text-center">
                          <th class="text-center"><input type="checkbox" class="checkall"></th>
                          <th class="text-center">班级名称</th>
                          <th class="text-center">班级类型</th>
                          <th class="text-center">班级级别</th>
                          <th class="text-center">班级人数</th>
                          <th class="text-center">主班老师</th>
                          <th class="text-center">副班老师</th>
                          <th class="text-center">保育老师</th>
                          <th class="text-center">升班</th>
                          <th class="text-center">修改信息</th>
                          <th class="text-center">删除</th>
                      </tr></thead>
                      <tbody>
                      </tbody>
                  </table>
              </div>
              <!--翻页组件-->
              <div class="class-paging">
                  <nav aria-label="Page navigation" class="paging">
                      <ul class="pagination">
                          <li class="disabled">
                              <a href="#" aria-label="Previous">
                                  <span aria-hidden="true">&laquo;</span>
                              </a>
                          </li>
                          <li class="active">
                              <a href="#">1
                                  <span class="sr-only">(current)</span>
                              </a>
                          </li>
                          <li><a href="#">2</a></li>
                          <li><a href="#">3</a></li>
                          <li><a href="#">4</a></li>
                          <li><a href="#">5</a></li>
                          <li>
                              <a href="#" aria-label="Next">
                                  <span aria-hidden="true">&raquo;</span>
                              </a>
                          </li>
                      </ul>
                  </nav></div>
          </div>
        </div>
    </div>
<!-------------弹框组件--------------->
        <!-- 添加弹框内容 -->
    <div>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">新增班级</h4>
                    </div>
                    <div class="modal-body form-inline">
                        <!--添加的班级名称输入框-->
                        <p>
                            <label>班级名称：</label>
                            <input  type="text" class="form-control addclassname" placeholder="只能包含汉字或字母（6位）">
                            <span class="iconcolor"></span>
                        </p>
                       <!-- 添加的年级下拉菜单框-->
                        <p>
                        <label>班级类型及级别：</label>
                            <select class="form-control addclasstype1">
                            <option>流动班</option>
                            <option>实体班</option>
                            <option>新力班</option>
                            <option>双语班</option>
                            <option>活力班</option>
                        </select>
                            <select class="form-control addclasstype2">
                                <option>大班</option>
                                <option>中班</option>
                                <option>小班</option>
                            </select>
                        </p>
                        <!--添加的主班老师下拉框-->
                        <p>
                            <label>主班老师：</label>
                            <select class="form-control addmasterteacher ">
                                <option>王老师</option>
                                <option>刘老师</option>
                                <option>修老师</option>
                                <option>Ben</option>
                                <option>王老师</option>
                            </select>
                        </p>
                       <!-- 添加的副班老师下拉框-->
                        <p>
                            <label>副班老师：</label>
                            <select class="form-control adddeputyteacher">
                                <option>刘老师</option>
                                <option>王老师</option>
                                <option>谭老师</option>
                                <option>Mina</option>
                                <option>魏老师</option>
                                <option>胡老师</option>
                            </select>
                        </p>
                        <!-- 添加的保育老师下拉框-->
                        <p>
                            <label>保育老师：</label>
                            <select class="form-control addconservationteacher">
                                <option>周老师</option>
                                <option>刘老师</option>
                                <option>盛老师</option>
                                <option>王老师</option>
                                <option>蒋老师</option>
                                <option>修老师</option>
                            </select>
                        </p>
                        <!--备注框-->
                        <p>
                            <label>备注：</label>
                            <textarea class="form-control addRemarks" id="resis" ></textarea>
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary adddata" data-dismiss="modal">保存更改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <!-- 修改弹框内容 -->
    <div>
        <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel2">修改班级信息</h4>
                    </div>
                    <div class="modal-body form-inline">
                        <!--添加的班级名称输入框-->
                        <p>
                            <label>班级名称：</label>
                            <input  type="text" class="change form-control  classname2 modifyclassname" placeholder="只能包含汉字或字母（6位）">
                            <span class="iconcolor-2 "></span>
                        </p>
                        <!-- 添加的年级下拉菜单框-->
                        <p>
                            <label>班级类型及级别：</label>
                            <select class="change form-control modifytype1">
                                <option>流动班</option>
                                <option>实体班</option>
                                <option>新力班</option>
                                <option>双语班</option>
                                <option>活力班</option>
                            </select>
                            <select class="change form-control modifytype2">
                                <option>大班</option>
                                <option>中班</option>
                                <option>小班</option>
                            </select>
                        </p>
                        <!--添加的主班老师下拉框-->
                        <p>
                            <label>主班老师：</label>
                            <select class="change form-control modifymasterteacher">
                                <option>王老师</option>
                                <option>刘老师</option>
                                <option>修老师</option>
                                <option>Ben</option>
                                <option>王老师</option>
                            </select>
                        </p>
                        <!-- 添加的副班老师下拉框-->
                        <p>
                            <label>副班老师：</label>
                            <select class="change form-control modifyeputyteacher">
                                <option>刘老师</option>
                                <option>王老师</option>
                                <option>谭老师</option>
                                <option>Mina</option>
                                <option>魏老师</option>
                                <option>胡老师</option>
                            </select>
                        </p>
                        <!-- 添加的保育老师下拉框-->
                        <p>
                            <label>保育老师：</label>
                            <select class="change form-control modifyconservationteacher">
                                <option>周老师</option>
                                <option>刘老师</option>
                                <option>盛老师</option>
                                <option>王老师</option>
                                <option>蒋老师</option>
                                <option>修老师</option>
                            </select>
                        </p>
                        <!--备注框-->
                        <p>
                            <label>备注：</label>
                            <textarea class="change form-control modifyRemarks" id="resis2" ></textarea>
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary modifyPreservation" data-dismiss="modal">保存更改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <!--删除弹框-->
    <div>
        <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel3">删除提示</h4>
                    </div>
                    <div class="modal-body form-inline">
                    <p>确定删除此班级信息吗？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary deletedata" data-dismiss="modal">删除</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <!--班级详细信息查看弹框-->
    <div>
        <div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel4">查看班级信息</h4>
                    </div>
                    <div class="modal-body form-inline">
                        <!--添加的班级名称输入框-->
                        <p>
                            <label>班级名称：</label>
                            <span class="seeclassname">xx班</span>
                        </p>
                        <!-- 添加的班级类型下拉菜单框-->
                        <p>
                            <label>班级类型：</label>
                            <span  class="seeclasstype">实体班</span>
                        </p>
                        <!-- 添加的班级级别下拉菜单框-->
                        <p>
                            <label>班级级别：</label>
                            <span class="seeclassclasslevel">大班</span>
                        </p>
                        <!--添加的主班老师下拉框-->
                        <p>
                            <label>主班老师：</label>
                            <span class="seemasterteacher">张老师</span>
                        </p>
                        <!-- 添加的副班老师下拉框-->
                        <p>
                            <label>副班老师：</label>
                            <span class="seedeputyteacher">刘老师</span>
                        </p>
                        <!-- 添加的保育老师下拉框-->
                        <p>
                            <label>保育老师：</label>
                            <span class="seeconservationteacher">赵老师</span>
                        </p>
                        <!--备注框-->
                        <p>
                            <label>备注：</label>
                            <span class="seeRemarks">xxxxxxxxxxxxxxxxxxxx</span>
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary"  data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <!--升班详细信息验证弹框-->
    <div>
        <div class="modal fade" id="myModal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel5">升班提示</h4>
                    </div>
                    <div class="modal-body form-inline">
                        <p>确定升级此班级吗？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary">升班</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>

</script>
</html>